<template>
  <div>
    <div class="JudgeSocialPractice">
      <h1>社会实践</h1>
      <el-table :data="SocialPractice" style="width: 100%" :key="practiceId">
        <el-table-column prop="initiator" label="发起单位">{{ user.initiator }}</el-table-column>
        <el-table-column prop="spot" label="地点">{{ user.spot }}</el-table-column>
        <el-table-column prop="days" label="天数">{{ user.days }}</el-table-column>
        <el-table-column prop="size" label="团队人数">{{ user.size }}</el-table-column>
        <el-table-column prop="job" label="团内职务">{{ user.job }}</el-table-column>
        <el-table-column prop="online" label="是否线上">{{ user.online }}</el-table-column>
        <el-table-column prop="award" label="是否获得奖励">{{ user.award }}</el-table-column>
        <el-table-column prop="award_name" label="奖励名称">{{ user.award_name }}</el-table-column>
      </el-table>
    </div>
    <div class="update">
      <el-form ref="form" :model="user" :rules="rules" label-width="100px">
        <el-form-item v-for="(user,practiceId) in userList"
                      :key="practiceId" prop="mark">
          评分
          <el-input class="test" v-model="user.spmark" placeholder="请输入分数"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>
import { getSPInfo } from "@/api/login";
import { updateJSPinfo } from "@/api/login";
export default {
  name: "JudgeSocialPractice",
  data() {
    return {
      userList:[{user:1,practiceId:1}],//这是测试用例
      user: {
        username:"",
        practiceId: "",
        initiator:"",
        spot:"",
        days:"",
        size:"",
        job:"",
        online:"",
        award:"",
        award_name:"",
        spmark:""
      },
      rules: {
        mark: [{ required: true, message: "请输入分数", trigger: "blur" }],
      },
    };
  },
  mounted() {
    getSPInfo().then((res) => {
      this.user.username = res.data.username;
      this.user.practiceId = res.data.practiceId;
      this.user.initiator = res.data.initiator;
      this.user.spot = res.data.spot;
      this.user.days = res.data.days;
      this.user.size = res.data.size;
      this.user.job = res.data.job;
      this.user.online = res.data.online;
      this.user.award = res.data.award;
      this.user.award_name = res.data.award_name;
      //是data标签下的内容，在api取名时注意
    });
  },
  methods:{
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          //发起网络请求登录，如果登录成功，跳转到主页面
          //操作与login api联系
          updateJSPinfo(this.user.username,this.user.practiceId,this.user.spmark).then(res =>{
            console.log(res.data.accessToken)
            setToken(res.data.accessToken)
          }).catch(() => {
            // 上传，
            this.loading = true
          })
        }
      })
    },
  }

};
</script>

<style>
.JudgeSocialPractice {
  padding: 20px;
}

.test{
  width: 150px !important;
}
</style>